<template>
  <view>
    <view class="navbar">
      <u-navbar :is-back="false" title-color="#c69959" :title="title" :border-bottom="false">
        <view class="slot-wrap">
          <!-- 		<view class="map-wrap" @click="toCenter">
						<image class="user-icon" src="../../static/index/user.png" mode=""></image>
					</view> -->
        </view>
      </u-navbar>
    </view>

    <view class="wrap" :style="{ marginTop: top + 'px' }">
      <view class="u-tabs-box">
        <u-tabs-swiper inactive-color="#999999" activeColor="#2281FF" ref="tabs" :list="tabList" :current="current" @change="change" :is-scroll="false" swiperWidth="750" :bar-width="135" :bar-height="6" :height="108" :bar-style="{ bottom: 0 }" :active-item-style="{ fontSize: '24rpx', backgroundColor: '#deac71' }"> </u-tabs-swiper>
      </view>

      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <!-- 预约用车 start -->
        <swiper-item class="swiper-item">
          <view style="height: 100%; width: 100%">
            <!-- <image class="car-back" src="../../static/index/back-one.png" mode=""></image> -->
            <view class="car-one">
              <view class="car-box">
                <view class="car-time-item flex-verticality" @click="showOneTime = true">
                  <image class="icon" src="../../static/index/time.png" mode=""></image>
                  <text class="add-placeholder text" v-if="oneHandlerTime">{{ oneHandlerTime }}</text>
                  <text class="add-placeholder text" v-else>请选择用车时间</text>
                  <image style="width: 14rpx; height: 24rpx" src="../../static/index/right.png" mode=""> </image>
                </view>
                <view class="car-add-item">
                  <view class="add-item flex-lr-verticality" @click="getAddress('oneStart')">
                    <view class="add-item-left flex-verticality">
                      <view class="outer-circle start-outer flex-center">
                        <view class="inner-circle start-inner flex-center">
                          <text class="circle-text">起</text>
                        </view>
                      </view>
                      <view class="add-input">
                        <text v-if="oneStart.name">{{ oneStart.name }}</text>
                        <text v-else class="add-placeholder">请选择出发地</text>
                      </view>
                    </view>
                    <image class="del-img" v-if="oneStart.name" src="../../static/address/del-img.png" mode="" @click.stop="clearSiteName('oneStart')"></image>
                    <image class="add-item-right" src="../../static/index/right.png" mode=""> </image>
                  </view>

                  <view class="add-item flex-lr-verticality" @click="getAddress('oneEnd')">
                    <view class="add-item-left flex-verticality">
                      <view class="outer-circle end-outer flex-center">
                        <view class="inner-circle end-inner flex-center">
                          <text class="circle-text">终</text>
                        </view>
                      </view>
                      <view class="add-input">
                        <text v-if="oneEnd.name">{{ oneEnd.name }}</text>
                        <text v-else class="add-placeholder">请选择到达地</text>
                      </view>
                    </view>
                    <image class="del-img" v-if="oneEnd.name" src="../../static/address/del-img.png" mode="" @click.stop="clearSiteName('oneEnd')"></image>
                    <image class="add-item-right" src="../../static/index/right.png" mode=""> </image>
                  </view>
                </view>
                <view class="car-btn-item" style="padding-bottom: 60upx">
                  <u-button :custom-style="btnStyle" type="primary" @click="submitOne">
                    <image style="width: 44rpx; height: 44rpx" src="../../static/center/contact.png" mode=""></image>
                    立即预约
                  </u-button>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
        <!-- end 预约用车 -->

        <!-- 接送机 -->
        <swiper-item class="swiper-item">
          <view style="height: 100%; width: 100%">
            <!-- <image class="car-back" src="../../static/index/back-two.png" mode=""></image> -->
            <view class="car-two">
              <view class="car-two-box">
                <view class="car-tab flex-verticality">
                  <view class="car-tab-item" @click="changeTab(1)">
                    <view class="car-tab-text" :class="transfer == 1 ? 'car-tab-bold' : ''"> 接机 </view>
                  </view>
                  <view class="car-tab-item" @click="changeTab(2)">
                    <view class="car-tab-text" :class="transfer == 2 ? 'car-tab-bold' : ''"> 送机 </view>
                  </view>
                  <view class="car-tab-none" :class="transfer == 1 ? 'car-tab-left' : 'car-tab-right'"> </view>
                </view>
                <view class="car-box" :class="transfer == 1 ? 'car-box-right' : 'car-box-left'">
                  <view class="car-time-item flex-verticality" v-if="transfer == 1">
                    <image class="icon" src="../../static/index/flight.png" mode=""></image>
                    <input class="text" type="text" v-model="flightNumber" placeholder="请输入航班号,如CU9860" />
                  </view>
                  <view class="car-time-item flex-verticality" v-if="transfer == 1" @click="showFourTime = true">
                    <image class="icon" src="../../static/index/time.png" mode=""></image>
                    <text class="add-placeholder text" v-if="fourHandlerTime">{{ fourHandlerTime }}</text>
                    <text class="add-placeholder text" v-else>请选择您的用车时间</text>
                    <image style="width: 14rpx; height: 24rpx" src="../../static/index/right.png" mode=""> </image>
                  </view>
                  <view class="car-time-item from_address flex-verticality" v-if="transfer == 1" @click="handleToAirport('end')">
                    <view class="dot dot-color-3888FC"></view>
                    <input class="text" disabled type="text" v-model="arriveAirport.address" placeholder="请选择接机机场" />
                    <image class="right" src="../../static/index/right.png" mode=""></image>
                  </view>
                  <view class="car-time-item from_address flex-verticality" v-if="transfer == 1" @click="getAddress('twoEnd')">
                    <view class="dot dot-color-FD8A5C"></view>
                    <view class="add-input" style="margin-left: 0">
                      <text v-if="twoEnd.name">{{ twoEnd.name }}</text>
                      <text v-else class="add-placeholder">输入您的目的地</text>
                    </view>
                    <image class="del-img" v-if="twoEnd.name" src="../../static/address/del-img.png" mode="" @click.stop="clearSiteName('twoEnd')"></image>
                    <image class="right" src="../../static/index/right.png" mode=""></image>
                  </view>
                  <view class="address" v-if="endAddress && transfer == 1">
                    <image class="site-icon" src="../../static/index/site-icon.png" mode=""></image>
                    <view class="site-main address-desc">
                      <view class="site-text"> 附近站点 </view>
                      <view class="site-info" @click="setEndSite()">
                        {{ endAddress.name ? endAddress.name : "" }}
                        {{ endAddress.distance | setDistance }}
                      </view>
                    </view>
                  </view>
                  <view class="car-time-item flex-verticality" v-if="transfer == 2" @click="showTwoTime = true">
                    <image class="icon" src="../../static/index/time.png" mode=""></image>
                    <!-- <input class="text" type="text" disabled v-model="twoHandlerTime" placeholder="请选择您的用车时间" /> -->
                    <text class="add-placeholder text" v-if="twoHandlerTime">{{ twoHandlerTime }}</text>
                    <text class="add-placeholder text" v-else>请选择您的用车时间</text>
                    <image style="width: 14rpx; height: 24rpx" src="../../static/index/right.png" mode=""> </image>
                  </view>
                  <view class="car-time-item from_address flex-verticality" v-if="transfer == 2" @click="getAddress('twoStart')">
                    <view class="dot dot-color-3888FC"></view>
                    <view class="add-input" style="margin-left: 0">
                      <text v-if="twoStart.name">{{ twoStart.name }}</text>
                      <text v-else class="add-placeholder">请选择上车地点</text>
                    </view>
                    <image class="del-img" v-if="twoStart.name" src="../../static/address/del-img.png" mode="" @click.stop="clearSiteName('twoStart')"></image>
                    <image class="right" src="../../static/index/right.png" mode=""></image>
                  </view>
                  <view class="address" v-if="startAddress && transfer == 2">
                    <image class="site-icon" src="../../static/index/site-icon.png" mode=""></image>
                    <view class="site-main address-desc">
                      <view class="site-text"> 附近站点 </view>
                      <view class="site-info" @click="setStartSite()">
                        {{ startAddress.name ? startAddress.name : "" }}
                        {{ startAddress.distance | setDistance }}
                      </view>
                    </view>
                  </view>
                  <view class="car-time-item from_address flex-verticality" v-if="transfer == 2" @click="handleToAirport('start')">
                    <view class="dot dot-color-FD8A5C"></view>
                    <input class="text" disabled type="text" v-model="departureAirport.address" placeholder="请输入您出发的机场" />
                    <image class="right" src="../../static/index/right.png" mode=""></image>
                  </view>
                  <view class="car-btn-item">
                    <u-button :custom-style="btnStyle" type="primary" @click="submitTwo">立即预约</u-button>
                  </view>
                  <view class="car-text-item"> 当前主要支持深圳地区当天接送机 </view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
        <!-- 包车 -->
        <swiper-item class="swiper-item">
          <view style="height: 100%; width: 100%">
            <!-- <image class="car-back" src="../../static/index/back-three.png" mode=""></image> -->
            <view class="car-one">
              <view class="car-box">
                <view class="car-time-item flex-verticality" @click="showThreeTime = true">
                  <image class="icon" src="../../static/index/time.png" mode=""></image>
                  <input class="text" type="text" placeholder="请选择用车时间" v-model="threeHandlerTime" disabled placeholder-class="add-placeholder" />
                </view>

                <view class="car-add-item" @click="getAddress('threeStart')">
                  <view class="add-item flex-lr-verticality">
                    <view class="add-item-left flex-verticality">
                      <view class="outer-circle start-outer flex-center">
                        <view class="inner-circle start-inner flex-center">
                          <text class="circle-text">起</text>
                        </view>
                      </view>
                      <view class="add-input">
                        <text v-if="threeStart.name">{{ threeStart.name }}</text>
                        <text v-else class="add-placeholder">请选择出发地</text>
                      </view>
                    </view>
                    <image class="del-img" v-if="threeStart.name" src="../../static/address/del-img.png" mode="" @click.stop="clearSiteName('threeStart')"></image>
                    <image class="add-item-right" src="../../static/index/right.png" mode=""> </image>
                  </view>
                </view>

                <view class="car-time-day flex-verticality" @click="isShowDaySelect = true">
                  <image class="icon" src="../../static/index/time.png" mode=""></image>
                  <input type="text" class="text" placeholder="请选择包车天数" v-model="threeStart.dayNum" disabled placeholder-class="add-placeholder" />
                </view>
                <view class="car-btn-item" style="padding-bottom: 60upx">
                  <u-button :custom-style="btnStyle" type="primary" @click="submitThree">立即预约</u-button>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
        <!-- 港澳顺风车 -->
        <swiper-item class="swiper-item">
          <view style="height: 100%; width: 100%">
            <view class="car-one">
              <view class="car-box">
                <view class="car-time-item flex-verticality" @click="showFiveTime = true">
                  <image class="icon" src="../../static/index/time.png" mode=""></image>
                  <text class="add-placeholder text" v-if="fiveHandlerTime">{{ fiveHandlerTime }}</text>
                  <text class="add-placeholder text" v-else>请选择用车时间</text>
                  <image style="width: 14rpx; height: 24rpx" src="../../static/index/right.png" mode=""> </image>
                </view>
                <view class="car-add-item">
                  <view class="add-item flex-lr-verticality" @click="getAddress('fiveStart')">
                    <view class="add-item-left flex-verticality">
                      <view class="outer-circle start-outer flex-center">
                        <view class="inner-circle start-inner flex-center">
                          <text class="circle-text">起</text>
                        </view>
                      </view>
                      <view class="add-input">
                        <text v-if="fiveStart.name">{{ fiveStart.name }}</text>
                        <text v-else class="add-placeholder">请选择出发地</text>
                      </view>
                    </view>
                    <image class="del-img" v-if="fiveStart.name" src="../../static/address/del-img.png" mode="" @click.stop="clearSiteName('fiveStart')"></image>
                    <image class="add-item-right" src="../../static/index/right.png" mode=""> </image>
                  </view>

                  <view class="add-item flex-lr-verticality" @click="getAddress('fiveEnd')">
                    <view class="add-item-left flex-verticality">
                      <view class="outer-circle end-outer flex-center">
                        <view class="inner-circle end-inner flex-center">
                          <text class="circle-text">终</text>
                        </view>
                      </view>
                      <view class="add-input">
                        <text v-if="fiveEnd.name">{{ fiveEnd.name }}</text>
                        <text v-else class="add-placeholder">请选择到达地</text>
                      </view>
                    </view>
                    <image class="del-img" v-if="fiveEnd.name" src="../../static/address/del-img.png" mode="" @click.stop="clearSiteName('fiveEnd')"></image>
                    <image class="add-item-right" src="../../static/index/right.png" mode=""> </image>
                  </view>
                </view>
                <view class="car-btn-item" style="padding-bottom: 60upx">
                  <u-button :custom-style="btnStyle" type="primary" @click="submitFive">
                    <image style="width: 44rpx; height: 44rpx" src="../../static/center/contact.png" mode=""></image>
                    立即预约
                  </u-button>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
        <!-- 顺风车 -->
        <swiper-item class="swiper-item">
          <view style="height: 100%; width: 100%">
            <!-- <image class="car-back" src="../../static/index/back-one.png" mode=""></image> -->
            <view class="car-one">
              <view class="car-box">
                <view class="car-time-item flex-verticality" @click="showSixTime = true">
                  <image class="icon" src="../../static/index/time.png" mode=""></image>
                  <!-- <input class="text" type="text" placeholder="请选择用车时间" v-model="sixHandlerTime" disabled placeholder-class="add-placeholder" /> -->
                  <text class="add-placeholder text" v-if="sixHandlerTime">{{ sixHandlerTime }}</text>
                  <text class="add-placeholder text" v-else>请选择用车时间</text>
                  <image style="width: 14rpx; height: 24rpx" src="../../static/index/right.png" mode=""> </image>
                </view>
                <view class="car-add-item">
                  <view class="add-item flex-lr-verticality" @click="getAddress('sixStart')">
                    <view class="add-item-left flex-verticality">
                      <view class="outer-circle start-outer flex-center">
                        <view class="inner-circle start-inner flex-center">
                          <text class="circle-text">起</text>
                        </view>
                      </view>
                      <view class="add-input">
                        <text v-if="sixStart.name">{{ sixStart.name }}</text>
                        <text v-else class="add-placeholder">请选择出发地</text>
                      </view>
                    </view>
                    <image class="del-img" v-if="sixStart.name" src="../../static/address/del-img.png" mode="" @click.stop="clearSiteName('sixStart')"></image>
                    <image class="add-item-right" src="../../static/index/right.png" mode=""> </image>
                  </view>

                  <view class="add-item flex-lr-verticality" @click="getAddress('sixEnd')">
                    <view class="add-item-left flex-verticality">
                      <view class="outer-circle end-outer flex-center">
                        <view class="inner-circle end-inner flex-center">
                          <text class="circle-text">终</text>
                        </view>
                      </view>
                      <view class="add-input">
                        <text v-if="sixEnd.name">{{ sixEnd.name }}</text>
                        <text v-else class="add-placeholder">请选择到达地</text>
                      </view>
                    </view>
                    <image class="del-img" v-if="sixEnd.name" src="../../static/address/del-img.png" mode="" @click.stop="clearSiteName('sixEnd')"></image>
                    <image class="add-item-right" src="../../static/index/right.png" mode=""> </image>
                  </view>

                  <view class="add-item flex-lr-verticality" @click="isShowCarSelect = true">
                    <view class="add-item-left flex-verticality">
                      <view class="outer-circle end-outer flex-center">
                        <view class="inner-circle end-inner flex-center">
                          <text class="circle-text">车</text>
                        </view>
                      </view>
                      <view class="add-input">
                        <text v-if="carType">{{ carType }}</text>
                        <text v-else class="add-placeholder">请选择车型</text>
                      </view>
                    </view>
                    <image class="del-img" v-if="carType" src="../../static/address/del-img.png" mode="" @click.stop="carType = ''"></image>
                    <image class="add-item-right" src="../../static/index/right.png" mode=""> </image>
                  </view>
                </view>
                <view class="car-btn-item" style="padding-bottom: 60upx">
                  <u-button :custom-style="btnStyle" type="primary" @click="submitSix">
                    <image style="width: 44rpx; height: 44rpx" src="../../static/center/contact.png" mode=""></image>
                    立即预约
                  </u-button>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 包车 -->
    <u-select v-model="isShowDaySelect" :list="daysArr" @confirm="handleConfirmDay"></u-select>
    <!-- 顺风车车型 -->
    <u-select v-model="isShowCarSelect" :list="carsArr" @confirm="handleConfirmCar"></u-select>
    <!-- 预约用车时间 -->
    <bz-date-picker v-model="showOneTime" title="请选择时间" :defaultTime="oneHandlerTime" minuteStep="10" days="30" minMinute="0" maxMinute="59" @confirm="oneHandlerTimeConfirm"></bz-date-picker>
    <!-- 送机时间 -->
    <bz-date-picker v-model="showTwoTime" title="请选择时间" :defaultTime="twoHandlerTime" minuteStep="10" days="1" minMinute="0" maxMinute="59" @confirm="twoHandlerTimeConfirm"></bz-date-picker>
    <!-- 接机时间 -->
    <bz-date-picker v-model="showFourTime" title="请选择时间" :defaultTime="fourHandlerTime" minuteStep="10" days="30" minMinute="0" maxMinute="59" @confirm="fourHandlerTimeConfirm"></bz-date-picker>
    <!-- 预约包车时间 -->
    <bz-date-picker v-model="showThreeTime" title="请选择时间" :defaultTime="threeHandlerTime" minuteStep="10" days="30" minMinute="0" maxMinute="59" @confirm="threeHandlerTimeConfirm"></bz-date-picker>
    <!-- 港澳用车 -->
    <bz-date-picker v-model="showFiveTime" title="请选择时间" :defaultTime="fiveHandlerTime" minuteStep="10" days="30" minMinute="0" maxMinute="59" @confirm="fiveHandlerTimeConfirm"></bz-date-picker>
    <bz-date-picker v-model="showSixTime" title="请选择时间" :defaultTime="sixHandlerTime" minuteStep="10" days="30" minMinute="0" maxMinute="59" @confirm="sixHandlerTimeConfirm"></bz-date-picker>

    <!-- 提示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
var that;
import { mapState } from "vuex";
import BzDatePicker from "@/components/bz-date-picker/bz-date-picker";
export default {
  components: {
    BzDatePicker,
  },
  computed: {
    ...mapState(["departureAirport", "arriveAirport"]),
  },
  watch: {
    twoEnd: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        console.log("twoEnd:" + JSON.stringify(val) + "oldVal:" + JSON.stringify(oldVal));
        // this.getEndAddres();
      },
      deep: true, //true 深度监听
    },
    twoStart: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        console.log("twoStart:" + JSON.stringify(val) + "oldVal:" + JSON.stringify(oldVal));
        // this.getStartAddres();
      },
      deep: true, //true 深度监听
    },
    departureAirport: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        console.log("departureAirport:" + JSON.stringify(val) + "oldVal:" + JSON.stringify(oldVal));
        if (this.twoStart.id) {
          this.getLineOne(this.twoStart.id, val.id);
        }
      },
      deep: true, //true 深度监听
    },
  },
  filters: {
    setDistance(e) {
      var n = "";
      if (e) {
        n = e.toFixed(2) + "km";
      } else {
        n = "0m";
      }
      return n;
    },
  },
  data() {
    return {
      isShowCarSelect: false,
       carsArr: [
       {
          value: "1",
          label: "5座大巴",
        },
        {
          value: "7",
          label: "7座大巴",
        },
        {
          value: "11",
          label: "11座大巴",
        },
        {
          value: "18",
          label: "18座大巴",
        },
        {
          value: "22",
          label: "22座大巴",
        },
        {
          value: "28",
          label: "28座大巴",
        },
        {
          value: "35",
          label: "35座大巴",
        },
        {
          value: "39",
          label: "39座大巴",
        },
        {
          value: "47",
          label: "47座大巴",
        },
        {
          value: "55",
          label: "55座大巴",
        },
       ],
      //是否显示包车天数弹框
      isShowDaySelect: false,
      //包车天数
      daysArr: [
        {
          value: "1",
          label: "一天",
        },
        {
          value: "2",
          label: "二天",
        },
        {
          value: "3",
          label: "三天",
        },
        {
          value: "4",
          label: "四天",
        },
        {
          value: "5",
          label: "五天",
        },
        {
          value: "6",
          label: "六天",
        },
        {
          value: "7",
          label: "七天",
        },
        {
          value: "8",
          label: "八天",
        },
        {
          value: "9",
          label: "九天",
        },
        {
          value: "10",
          label: "十天",
        },
      ],
      tabList: [
        {
          name: "预约用车",
        },
        {
          name: "接送机",
        },
        {
          name: "预约包车",
        },
        {
          name: "港澳用车",
        },
        {
          name: "顺风车",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      dx: 0,
      top: 0,
      btnStyle: {
        background: "#deac71",
        borderRadius: "44rpx",
        color: "#FFFFFF",
        fontSize: "30rpx",
        height: "88rpx",
      },
      transfer: 1, //1是接机2是送机
      showOneTime: false, //预约用车选时间
      showTwoTime: false, //送机用车选时间
      showThreeTime: false, //包车用车选时间
      showFourTime: false, //接机用车选时间
      showFiveTime: false, //港澳用车选时间
      showSixTime: false, //顺风车用车选时间
      title: "贵宾专车",
      // 预约用车
      oneHandlerTime: "",
      oneStart: {
        geoType: "GCJ02",
        lat: "", //纬度
        lng: "", //经度
        name: "", //地区名称
        address: "",
      },
      oneEnd: {
        geoType: "GCJ02",
        lat: "", //纬度
        lng: "", //经度
        name: "", //地区名称
        address: "",
      },
      //接送机
      flightNumber: "", //航班号
      twoHandlerTime: "",
      fourHandlerTime: "",
      twoStart: {
        geoType: "GCJ02",
        latitude: "", //纬度
        longitude: "", //经度
        name: "", //地区名称
        address: "",
      },
      twoEnd: {
        geoType: "GCJ02",
        latitude: "", //纬度
        longitude: "", //经度
        name: "", //地区名称
        address: "",
      },
      // 预约包车
      threeHandlerTime: "",
      fiveHandlerTime: "", //港澳用车
      sixHandlerTime: "", //顺风车
      threeStart: {
        geoType: "GCJ02",
        lat: "", //纬度
        lng: "", //经度
        name: "", //地区名称
        address: "",
        dayNum: "",
      },
      fiveStart: {
        geoType: "GCJ02",
        lat: "", //纬度
        lng: "", //经度
        name: "", //地区名称
        address: "",
      },
      fiveEnd: {
        geoType: "GCJ02",
        lat: "", //纬度
        lng: "", //经度
        name: "", //地区名称
        address: "",
      },
      sixStart: {
        geoType: "GCJ02",
        lat: "", //纬度
        lng: "", //经度
        name: "", //地区名称
        address: "",
      },
      sixEnd: {
        geoType: "GCJ02",
        lat: "", //纬度
        lng: "", //经度
        name: "", //地区名称
        address: "",
      },
      carType:"",//顺风车车型
      // 目的地站点
      endAddress: "",
      // 起始地站点
      startAddress: "",
    };
  },
  onLoad(options) {
    console.log("tooptoptopt", options);
    if (options.scene) {
      uni.setStorageSync("inviteCode", decodeURIComponent(options.scene));
    }

    that = this;
    setTimeout(function () {
      let view = uni.createSelectorQuery().select(".navbar");
      view
        .fields(
          {
            size: true,
            scrollOffset: true,
          },
          (data) => {
            that.top = data.height;
          }
        )
        .exec();
    }, 200);
    this.$store.commit("setDepartureAirport", {});
    this.$store.commit("setArriveAirport", {});
    this.$store.commit("setLineId", "");
    this.$store.commit("setFlightNo", "");
  },
  methods: {
    //包车天数弹框确定回调
    handleConfirmDay(e, value) {
      this.threeStart.dayNum = e[0].label;
    },
    //顺风车车型弹框确定回调
    handleConfirmCar(e, value) {
      this.carType = e[0].label;
    },
    // tab栏切换
    change(index) {
			// this.current = index;
      this.swiperCurrent = index;
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      console.log(current);
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      this.title = this.tabList[this.current].name;
    },
    toCenter() {
      console.log(111);
      uni.navigateTo({
        url: "/pages/center/index",
      });
    },
    changeTab(e) {
      if (e == this.transfer) {
        return;
      } else {
        this.transfer = e;
      }
    },
    getAddress(text) {
      console.log("点击起点的回调", text);
      if (text === "twoEnd") {
        if (!this.arriveAirport.address) {
          this.$refs.uToast.show({
            title: "请先选择接机机场",
            type: "warning",
            icon: false,
          });
          return;
        }
      }
      uni.chooseLocation({
        success: function (res) {
          console.log("res", res);
          console.log("调用后");
          if (text === "oneStart") {
            that.oneStart.name = res.name;
            that.oneStart.lat = res.latitude;
            that.oneStart.lng = res.longitude;
            that.oneStart.address = res.address;
          } else if (text === "oneEnd") {
            that.oneEnd.name = res.name;
            that.oneEnd.lat = res.latitude;
            that.oneEnd.lng = res.longitude;
            that.oneEnd.address = res.address;
          } else if (text === "twoStart") {
            that.twoStart.name = res.name;
            that.twoStart.latitude = res.latitude;
            that.twoStart.longitude = res.longitude;
            that.twoStart.address = res.address;
          } else if (text === "twoEnd") {
            that.twoEnd.name = res.name;
            that.twoEnd.latitude = res.latitude;
            that.twoEnd.longitude = res.longitude;
            that.twoEnd.address = res.address;
          } else if (text === "threeStart") {
            that.threeStart.name = res.name;
            that.threeStart.lat = res.latitude;
            that.threeStart.lng = res.longitude;
            that.threeStart.address = res.address;
          } else if (text == "fiveStart") {
            //港澳用车
            that.fiveStart.name = res.name;
            that.fiveStart.lat = res.latitude;
            that.fiveStart.lng = res.longitude;
            that.fiveStart.address = res.address;
          } else if (text == "fiveEnd") {
            //港澳用车
            that.fiveEnd.name = res.name;
            that.fiveEnd.lat = res.latitude;
            that.fiveEnd.lng = res.longitude;
            that.fiveEnd.address = res.address;
          } else if (text == "sixStart") {
            //顺风车
            that.sixStart.name = res.name;
            that.sixStart.lat = res.latitude;
            that.sixStart.lng = res.longitude;
            that.sixStart.address = res.address;
          } else if (text == "sixEnd") {
            //顺风车
            that.sixEnd.name = res.name;
            that.sixEnd.lat = res.latitude;
            that.sixEnd.lng = res.longitude;
            that.sixEnd.address = res.address;
          }
        },
      });
    },
    clearSiteName(text) {
      if (text === "oneStart") {
        this.oneStart.name = "";
        this.oneStart.lat = "";
        this.oneStart.lng = "";
        this.oneStart.address = "";
      } else if (text === "oneEnd") {
        this.oneEnd.name = "";
        this.oneEnd.lat = "";
        this.oneEnd.lng = "";
        this.oneEnd.address = "";
      } else if (text === "threeStart") {
        this.threeStart.name = "";
        this.threeStart.lat = "";
        this.threeStart.lng = "";
        this.threeStart.address = "";
      } else if (text === "twoStart") {
        this.twoStart.name = "";
        this.twoStart.latitude = "";
        this.twoStart.longitude = "";
        this.twoStart.address = "";
        this.startAddress = "";
        this.$store.commit("setLineId", "");
      } else if (text === "twoEnd") {
        this.twoEnd.name = "";
        this.twoEnd.latitude = "";
        this.twoEnd.longitude = "";
        this.twoEnd.address = "";
        this.endAddress = "";
        this.$store.commit("setLineId", "");
      } else if (text == "fiveStart") {
        // 港澳
        this.fiveStart.name = "";
        this.fiveStart.lat = "";
        this.fiveStart.lng = "";
        this.fiveStart.address = "";
      } else if (text == "fiveEnd") {
        this.fiveEnd.name = "";
        this.fiveEnd.lat = "";
        this.fiveEnd.lng = "";
        this.fiveEnd.address = "";
      } else if (text == "sixStart") {
        this.sixStart.name = "";
        this.sixStart.lat = "";
        this.sixStart.lng = "";
        this.sixStart.address = "";
      } else if (text == "sixEnd") {
        this.sixEnd.name = "";
        this.sixEnd.lat = "";
        this.sixEnd.lng = "";
        this.sixEnd.address = "";
      }
    },
    //预约用车确认预约
    submitOne() {
      this.$util.checkToken().then((res) => {
        const fields = [
          {
            value: !that.oneHandlerTime,
            message: "请选择用车时间",
          },
          {
            value: !that.oneStart.name,
            message: "请选择出发地",
          },
          {
            value: !that.oneEnd.name,
            message: "请选择到达地",
          },
        ];
        for (const field of fields) {
          if (field.value) {
            this.showToast(field.message, "warning");
            return false;
          }
        }
        let data = {
          useTime: `${that.oneHandlerTime}:00`,
          fromLocation: that.oneStart,
          toLocation: that.oneEnd,
          orderType: 301,
          bizType: 3,
        };

        that.$u.post("/vehicleService/product/queryReservation", data).then((data) => {
          console.log("ddddd", data.result);
          if (data) {
            that.$store.commit("setLineId", "");
            that.$store.commit("setFlightNo", "");
            that.$store.commit("setSpecialCarList", data.result.productList);
            that.$store.commit("setHandleTime", that.oneHandlerTime);
            that.$store.commit("setStartAddress", that.oneStart);
            that.$store.commit("setEndAddress", that.oneEnd);
            uni.navigateTo({
              url: "../model/index?type=1",
            });
          } else {
            that.showToast("相关城市服务暂未开通", "error");
          }
        });
      });
    },
    //预约包车确认预约
    submitThree() {
      this.$util.checkToken().then((res) => {
        if (!that.threeHandlerTime) {
          that.showToast("请选择用车时间", "warning");
          return;
        }
        if (!that.threeStart.name) {
          that.showToast("请选择出发地", "warning");
          return;
        }

        let data = {
          days: this.daysArr.find((item) => item.label == this.threeStart.dayNum).value,
          useTime: `${that.threeHandlerTime}:00`,
          fromLocation: this.threeStart,
          toLocation: this.threeStart,
          orderType: 201,
          bizType: 2,
        };
        console.log("包车参数1", data);
        that.$u.post("/vehicleService/product/queryDaily", data).then((res) => {
          console.log("dadada", res.code);
          if (res) {
            that.$store.commit("setLineId", "");
            that.$store.commit("setFlightNo", "");
            that.$store.commit("setCharteredBusList", res.result.productList);
            that.$store.commit("setHandleTime", that.threeHandlerTime);
            that.$store.commit("setStartAddress", that.threeStart);
            console.log(111);
            uni.navigateTo({
              url: `../model/charteredBus?days=${data.days}`,
            });
          } else {
            that.showToast("相关城市服务暂未开通", "error");
          }
        });
      });
    },
    // 预约用车确定时间
    oneHandlerTimeConfirm(val) {
      this.oneHandlerTime = val;
    },
    // 送机确定时间
    twoHandlerTimeConfirm(val) {
      this.twoHandlerTime = val;
    },
    // 预约包车确定时间
    threeHandlerTimeConfirm(val) {
      this.threeHandlerTime = val;
    },
    //港澳用车确定时间
    fiveHandlerTimeConfirm(val) {
      this.fiveHandlerTime = val;
    },
    //顺风车用车确定时间
    sixHandlerTimeConfirm(val) {
      this.sixHandlerTime = val;
    },
    // 接机确定时间
    fourHandlerTimeConfirm(val) {
      this.fourHandlerTime = val;
    },
    // 选择机场
    handleToAirport(text) {
      let addressType;
      if (text == "start") {
        addressType = 1;
      } else if (text == "end") {
        addressType = 2;
      }
      console.log(111);
      uni.navigateTo({
        url: `../airport/index?addressType=${addressType}`,
      });
    },
    //港澳用车
    submitFive() {
      this.$util.checkToken().then((res) => {
        const fields = [
          {
            value: !that.fiveHandlerTime,
            message: "请选择用车时间",
          },
          {
            value: !that.fiveStart.name,
            message: "请选择出发地",
          },
          {
            value: !that.fiveEnd.name,
            message: "请选择到达地",
          },
        ];
        for (const field of fields) {
          if (field.value) {
            this.showToast(field.message, "warning");
            return false;
          }
        }
        let data = {
          useTime: `${that.fiveHandlerTime}:00`,
          fromLocation: that.fiveStart,
          toLocation: that.fiveEnd,
          orderType: 301,
          bizType: 3,
        };

        that.$u.post("/vehicleService/product/queryReservation", data).then((data) => {
          console.log("ddddd", data.result);
          if (data) {
            that.$store.commit("setLineId", "");
            that.$store.commit("setFlightNo", "");
            that.$store.commit("setSpecialCarList", data.result.productList);
            that.$store.commit("setHandleTime", that.fiveHandlerTime);
            that.$store.commit("setStartAddress", that.fiveStart);
            that.$store.commit("setEndAddress", that.fiveEnd);
            uni.navigateTo({
              url: "../model/index?type=3",
            });
          } else {
            that.showToast("相关城市服务暂未开通", "error");
          }
        });
      });
    },
    //港澳用车
    submitSix() {
      this.$util.checkToken().then((res) => {
        const fields = [
          {
            value: !that.sixHandlerTime,
            message: "请选择用车时间",
          },
          {
            value: !that.sixStart.name,
            message: "请选择出发地",
          },
          {
            value: !that.sixEnd.name,
            message: "请选择到达地",
          },
        ];
        for (const field of fields) {
          if (field.value) {
            this.showToast(field.message, "warning");
            return false;
          }
        }
        let data = {
          useTime: `${that.sixHandlerTime}:00`,
          fromLocation: that.sixStart,
          toLocation: that.sixEnd,
          orderType: 301,
          bizType: 3,
        };

        that.$u.post("/vehicleService/product/queryReservation", data).then((data) => {
          console.log("ddddd", data.result);
          if (data) {
            that.$store.commit("setLineId", "");
            that.$store.commit("setFlightNo", "");
            that.$store.commit("setSpecialCarList", data.result.productList);
            that.$store.commit("setHandleTime", that.sixHandlerTime);
            that.$store.commit("setStartAddress", that.sixStart);
            that.$store.commit("setEndAddress", that.sixEnd);
            uni.navigateTo({
              url: "../model/index?type=4",
            });
          } else {
            that.showToast("相关城市服务暂未开通", "error");
          }
        });
      });
    },
    // 接送机确认预约
    submitTwo() {
      //this.transfer 1接机2送机
      if (this.transfer == 1) {
        that.$util.checkToken().then((res) => {
          const fields = [
            {
              value: !that.flightNumber,
              message: "请输入航班号",
            },
            {
              value: !that.fourHandlerTime,
              message: "请选择用车时间",
            },
            {
              value: !that.arriveAirport.address,
              message: "请选择接机机场",
            },
            {
              value: !that.twoEnd.name,
              message: "请选择目的地",
            },
          ];

          for (const field of fields) {
            if (field.value) {
              this.showToast(field.message, "warning");
              return false;
            }
          }
          let start = {
            geoType: "GCJ02",
            latitude: Number(that.arriveAirport.lat),
            longitude: Number(that.arriveAirport.lng),
            name: that.arriveAirport.name,
            address: that.arriveAirport.address,
          };

          let obj = {
            serviceId: "7",
            departureTime: this.fourHandlerTime + ":00",
            startLocation: {
              name: this.arriveAirport.address,
              lat: this.arriveAirport.location.split(",")[1],
              lng: this.arriveAirport.location.split(",")[0],
            },
            endLocation: {
              name: this.twoEnd.name,
              lat: this.twoEnd.latitude,
              lng: this.twoEnd.longitude,
            },
          };
          //接机
          let data = {
            bizType: 1,
            orderType: 101,
            fromLocation: obj.startLocation,
            toLocation: obj.endLocation,
            useTime: this.fourHandlerTime + ":00",
            filghtNo: that.flightNumber,
          };

          that.$u.post("/vehicleService/product/queryJnt", data).then((res) => {
            console.log("chakan res", res);
            that.$store.commit("setSpecialCarList", res.result.productList);
            // that.$store.commit("setFlightNo", that.flightNumber);
            // that.$store.commit("setHandleTime", that.fourHandlerTime);
            // that.$store.commit("setStartAddress", start);
            // that.$store.commit("setEndAddress", that.twoEnd);
            console.log(111);
            uni.navigateTo({
              url: "../model/index?type=3",
            });
          });
        });
      } else if (this.transfer == 2) {
        this.$util.checkToken().then((res) => {
          const fields = [
            {
              value: !that.twoHandlerTime,
              message: "请选择用车时间",
            },
            {
              value: !that.twoStart.name,
              message: "请选择上车地点",
            },
            {
              value: !that.departureAirport.address,
              message: "请选择出发机场",
            },
          ];
          for (const field of fields) {
            if (field.value) {
              this.showToast(field.message, "warning");
              return false;
            }
          }

          let end = {
            lat: that.departureAirport.location.split(",")[1],
            lng: that.departureAirport.location.split(",")[0],
            name: that.departureAirport.address,
            address: that.departureAirport.addrs,
          };

          //送机
          let data = {
            bizType: 1,
            orderType: 102,
            fromLocation: {
              name: this.twoStart.name,
              lat: this.twoStart.latitude,
              lng: this.twoStart.longitude,
            },
            toLocation: end,
            useTime: this.twoHandlerTime + ":00",
          };

          that.$u.post("/vehicleService/product/queryJnt", data).then((res) => {
            that.$store.commit("setSpecialCarList", res.result.productList);
            // that.$store.commit("setFlightNo", "");
            // that.$store.commit("setHandleTime", that.twoHandlerTime);
            // that.$store.commit("setStartAddress", that.twoStart);
            // that.$store.commit("setEndAddress", end);
            console.log(111);
            uni.navigateTo({
              url: "../model/index?type=4",
            });
          });
        });
      }
    },
    // 计算两个经纬度之间的距离
    getDistance(lat1, lng1, lat2, lng2) {
      const earthRadius = 6371; // 地球半径，单位为千米
      const dLat = ((lat2 - lat1) * Math.PI) / 180;
      const dLng = ((lng2 - lng1) * Math.PI) / 180;
      const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos((lat1 * Math.PI) / 180) * Math.cos((lat2 * Math.PI) / 180) * Math.sin(dLng / 2) * Math.sin(dLng / 2);
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      const distance = earthRadius * c;
      return distance;
    },
    // getEndAddres() {
    // 	let form = {
    // 		addressType: 2,
    // 		longitude: this.twoEnd.longitude,
    // 		latitude: this.twoEnd.latitude,
    // 		startSite: this.arriveAirport.id,
    // 	};
    // 	if (!this.twoEnd.name) {
    // 		return;
    // 	}
    //   // /terminalManager/site
    // 	this.$u.post("/vehicleService/cityAirPort", form).then((data) => {
    // 		if (data.length != 0) {
    // 			this.endAddress = data[0];
    // 		}
    // 	});
    // },
    getStartAddres() {
      let form = {
        addressType: 1,
        longitude: this.twoStart.longitude,
        latitude: this.twoStart.latitude,
        startSite: this.departureAirport.id,
      };
      if (!this.twoStart.name) {
        return;
      }
      this.$u.post("/terminalManager/site", form).then((data) => {
        if (data.length != 0) {
          this.startAddress = data[0];
        }
      });
    },
    setEndSite() {
      this.twoEnd.name = this.endAddress.name;
      this.twoEnd.latitude = this.endAddress.lat;
      this.twoEnd.longitude = this.endAddress.lng;
      this.twoEnd.address = this.endAddress.addrs;
      this.getLineOne(this.arriveAirport.id, this.endAddress.id);
    },
    setStartSite() {
      this.twoStart.name = this.startAddress.name;
      this.twoStart.latitude = this.startAddress.lat;
      this.twoStart.longitude = this.startAddress.lng;
      this.twoStart.address = this.startAddress.addrs;
      this.twoStart.id = this.startAddress.id;
    },
    // 获取接机线路
    getLineOne(startId, endId) {
      let form = {
        startSite: startId,
        endSite: endId,
      };
      this.$u.post("/lineManager/lineQuery", form).then((data) => {
        that.$store.commit("setLineId", data.id);
      });
    },
    //弹框函数
    showToast(message, type, icon = false) {
      this.$refs.uToast.show({
        title: message,
        type: type,
        icon: icon,
      });
    },
  },
};
</script>

<style>
/* #ifndef H5 */
page {
  height: 100%;
  line-height: 1;
}

/* #endif */
</style>

<style lang="scss" scoped>
/deep/.u-navbar {
  z-index: 0 !important;
  position: relative;
  width: 100% !important;
  height: 610rpx;
}

/deep/.u-navbar::before {
  content: "";
  background: url("../../static/index/back-one.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* 确保背景图在内容下方 */
}

/deep/.u-tabs {
  background: none !important;
  position: absolute;
  z-index: 999 !important;
}

/deep/.u-tabs-scroll-box {
  align-items: center;
  justify-content: space-around !important;
  z-index: 9999;
}

/deep/.u-tabs-item {
  height: 28px !important;
  color: #fff !important;
  line-height: 28px !important;
  font-size: 24rpx !important;
  flex: 0 !important;
  border-radius: 24rpx;
  font-size: 24rpx;
  font-weight: 100 !important;
}

/deep/.u-scroll-bar {
  background: none !important;
}

.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  bottom: 0;
  width: 100%;
  top: 0;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;

  .car-back {
    width: 100%;
    height: 610upx;
    position: absolute;
  }

  .car-btn-item {
    padding-top: 30upx;
  }

  .car-text-item {
    font-size: 24upx;
    color: #666666;
    padding: 30upx;
    text-align: center;
  }

  .car-one {
    padding: 250upx 30upx 0 30upx;
    position: relative;

    .car-box {
      // background: #ffffff;
      box-shadow: 1upx 4upx 12upx 1upx rgba(0, 0, 0, 0.05);
      border-radius: 20upx;
      padding: 0 30upx;
      background: linear-gradient(to bottom, #fff1d5, #fff 28%);

      .car-time-item {
        padding: 14px 10px;
        border-bottom: 1upx solid #dcdcdc;

        .icon {
          width: 50upx;
          height: 50upx;
          margin-left: 10upx;
        }

        .text {
          font-size: 32upx;
          color: #333333;
          flex: 1;
          margin-left: 18upx;
        }
      }

      .car-add-item {
        padding: 38upx 0;
        // border-bottom: 1upx solid #dcdcdc;

        .add-item {
          position: relative;
          background: #f3f5f6;
          padding: 14px 10px;
          border-radius: 14px;
          margin: 26rpx 0;
        }

        .add-item-left {
          flex: 1;

          .start-outer {
            background-color: #91bdfa;
          }

          .start-inner {
            background-color: #2281ff;
          }

          .end-outer {
            background-color: #fadbcc;
          }

          .end-inner {
            background-color: #fd8a5c;
          }

          .outer-circle {
            width: 50upx;
            height: 50upx;
            margin-left: 10upx;
            border-radius: 50%;

            .inner-circle {
              width: 38upx;
              height: 38upx;
              border-radius: 50%;

              .circle-text {
                font-size: 24upx;
                color: #ffffff;
                line-height: 38upx;
                text-align: center;
              }
            }
          }
        }

        .add-item-right {
          width: 14upx;
          height: 24upx;
        }
      }

      .car-time-day {
        padding-bottom: 40rpx;
        border-bottom: 1upx solid #dcdcdc;

        .icon {
          width: 28upx;
          height: 28upx;
          margin-left: 18upx;
        }

        .text {
          font-size: 32upx;
          color: #333333;
          flex: 1;
          margin-left: 48upx;
        }
      }
    }
  }

  .car-two {
    padding: 250upx 30upx 0 30upx;
    position: relative;
    // padding: 40upx 30upx 0 30upx;

    .car-two-box {
      position: relative;
      box-shadow: 1upx 4upx 12upx 1upx rgba(0, 0, 0, 0.05);
      border-radius: 20upx;
      overflow: hidden;
    }

    .car-tab {
      position: relative;

      .car-tab-item {
        width: 50%;
        height: 108upx;
        color: #333333;
        background-color: #dcdcdc;
        position: relative;

        .car-tab-text {
          font-size: 32upx;
          text-align: center;
          line-height: 108upx;
          position: relative;
          z-index: 3;
          color: #999999;
        }

        .car-tab-bold {
          font-weight: bold;
          color: #333333;
        }
      }

      .car-tab-left {
        left: 0;
      }

      .car-tab-right {
        left: 50%;
      }

      .car-tab-none {
        z-index: 1;
        background-color: #ffffff;
        color: #999999;
        position: absolute;
        height: 108upx;
        width: 50%;
        border-radius: 20upx 20upx 0px 0px;
        transition: all 0.35s ease 0s;
      }
    }

    .car-box {
      background: #ffffff;
      padding: 0 30upx;
      width: 100%;
      transition: all 1s ease 0s;
      .from_address {
        position: relative;
        background: #f3f5f6;
        padding: 14px 10px !important;
        border-radius: 14px;
        margin: 24rpx 0;
        border-bottom: none !important;
      }
      .car-time-item {
        padding: 40rpx 20rpx !important;
        border-bottom: 1upx solid #dcdcdc;

        .icon {
          width: 28upx;
          height: 28upx;
          margin-left: 18upx;
          margin-right: 53upx;
        }

        .text {
          font-size: 32upx;
          color: #333333;
          flex: 1;
        }

        .dot {
          width: 18upx;
          height: 18upx;
          margin-left: 24upx;
          margin-right: 57upx;
          border-radius: 50%;
        }

        .dot-color-3888FC {
          background-color: #3888fc;
        }

        .dot-color-FD8A5C {
          background-color: #fd8a5c;
        }

        .right {
          width: 14upx;
          height: 24upx;
        }
      }
    }

    .car-box-left {
      border-radius: 20upx 0 0 0;
    }

    .car-box-right {
      border-radius: 0 20upx 0 0;
    }
  }
}

.slot-wrap {
  display: flex;
  align-items: center;
  flex: 1;
}

.map-wrap {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
}

.user-icon {
  width: 42upx;
  height: 42upx;
}

/* 最底部的按钮 */
.flex {
  display: flex;
}

.bottom-fix {
  position: fixed;
  bottom: 0px;
  width: 100%;
  box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.08);
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
  background-color: #ffffff;
}

.cu-bar {
  display: flex;
  position: relative;
  align-items: center;
  min-height: 98upx;
  justify-content: space-between;
}

.bg-white {
  background-color: #ffffff;
  color: #808080;
}

.half-width {
  padding: 0 30upx;
  flex: 1;
}

.item-width-1 {
  width: 70%;
}

.font-28-333333 {
  color: #333333;
  font-size: 28upx;
}

.text-sm {
  font-size: 22upx;
  margin-right: 10upx;
}

.text-orange2 {
  color: #ff4e18;
}

.text-lg {
  font-size: 36upx;
}

.font-bold {
  font-weight: bold;
}

.item-width-2 {
  width: 30%;
  padding-left: 30upx;
  border-left: 1upx solid rgba(0, 0, 0, 0.1);
}

.align-center {
  align-items: center;
}

.font-28-666666 {
  color: #666666;
  font-size: 28upx;
}

.bg-gradual-orange {
  background: linear-gradient(0deg, #2281ff 0%, #4e9afd 100%);
  color: #ffffff;
}

.submit-btn {
  width: 300upx;
  justify-content: center;
  font-size: 36upx;
  font-weight: bold;
}

.justify-center {
  justify-content: center;
}

.del-img {
  height: 28upx;
  width: 28upx;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 40upx;
  z-index: 9;
}

.address {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1upx solid #dcdcdc;
}

.address-desc {
  font-size: 30upx;
  display: flex;
  align-items: center;
  border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
  padding: 40upx 0;
  width: calc(100% - 80upx);
}

.address-desc .blur {
  font-size: 30upx;
  flex: 1;
}

.address-desc .blur-n {
  font-size: 30upx;
  color: #999999;
  flex: 1;
}

.site-icon {
  width: 34upx;
  height: 34upx;
  margin-left: 8upx;
}

.site-main {
  border: none;
  justify-content: space-between;
}

.site-text {
  font-weight: bold;
  color: #178dff;
}

.site-info {
  font-size: 24upx;
  color: #666666;
  margin-left: 30upx;
  flex: 1;
  text-align: right;
}

.add-input {
  font-size: 32upx;
  color: #333333;
  flex: 1;
  margin-left: 18upx;
  margin-right: 60upx;
  line-height: 42upx;
}

.add-placeholder {
  font-weight: normal;
  font-size: 32upx;
  color: black;
}
</style>